<template>
  <div id="app">
    <h1>任务评分</h1><br>
    <el-input v-model="score" placeholder="任务评分（满分100）" class="score"></el-input>
    <h1>任务评价</h1><br>
    <el-input
      type="textarea"
      :align="center"
      :size="30"
      :rows="8"
      placeholder="请输入评价"
      v-model="words"
    class="evaluation">
    </el-input><br>
    <el-button type="primary" @click="Submit">
      提交
    </el-button>
  </div>
</template>

<script>
import axios from 'axios'
import router from '../../router'

export default {
  name: 'Evaluation',
  data () {
    return {
      id: this.$route.params.id,
      score: '',
      words: ''
    }
  },
  methods: {
    Submit: function () {
      if (this.score > 100 || this.score < 0) {
        alert('请输入有效评分（0-100）')
      } else {
        if (this.words === '') {
          alert('请输入评价内容')
        } else {
          axios.post(`user/task/feedback`, {
            id: this.id.toString(),
            words: this.words,
            score: this.score
          }).then(res => {
            if (res.data.status === 100) {
              alert(res.data.data.msg)
              return this.$router.push({
                path: '/MyFinishedTask'
              })
            } else {
              alert('提交失败')
            }
          }).catch(err => {
            alert(err)
            router.replace('/login')
          })
        }
      }
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
}
.score {
  /*border-radius: 15px;*/
  /*background-clip: padding-box;*/
  margin: 30px auto;
  width: 350px;
  /*padding: 35px 35px 15px 35px;*/
  /*background: #fff;*/
  /*border: 1px solid #eaeaea;*/
  /*box-shadow: 0 0 25px #cac6c6;*/
}
.evaluation {
  /*border-radius: 15px;*/
  /*background-clip: padding-box;*/
  height: 350px;
  margin: 30px auto;
  width: 600px;
  /*padding: 10px;*/
  /*background: #fff;*/
  /*border: 1px solid #eaeaea;*/
  /*box-shadow: 0 0 25px #cac6c6;*/
}
</style>
